<!--
 * @Author: 袁三金
 * @Date: 2024-03-18 21:50:34
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-03-19 01:25:29
 * @Description: 我的相册页面
-->
<template>
    <div class="all">
      <header class="header">
        <div class="header_left">全部相册</div>
      </header>
      <div class="image_main">
        <div
          class="demo-image__preview"
          v-for="(item, index) in imageList"
          :key="index"
          :class="{ active: activeIndex === index }"
          @contextmenu="showContextMenu(index, $event)"
          @click="hideContextMenu"
        >
          <div
            class="context_menu"
            v-if="activeIndex === index"
            :style="{ top: contextMenuTop + 'px', left: contextMenuLeft + 'px' }"
          >
            <ul class="context_menu_items">
              <li class="context_menu_item" @click="dialogNewFile = true">
                <div class="context_menu_item_icon">
                  <i class="el-icon-folder-add"></i>
                </div>
                <div class="context_menu_item_text">下载</div>
              </li>
              <li class="context_menu_item">
                <div class="context_menu_item_icon">
                  <i class="el-icon-upload2"></i>
                </div>
                <div class="context_menu_item_text" @click="showUploadFileFUn">
                  查看详细信息
                </div>
              </li>
              <li class="context_menu_item waring">
                <div class="context_menu_item_icon">
                  <i class="el-icon-refresh"></i>
                </div>
                <div class="context_menu_item_text" @click="refresh()">
                  放入回收站
                </div>
              </li>
            </ul>
          </div>
          <el-image style="width: 170px; height: 170px" :src="item.url">
          </el-image>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        imageList: [
          {
            id: 0,
            url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            showClickMenu: false,
          },
          {
            id: 1,
            url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            showClickMenu: false,
          },
          {
            id: 2,
            url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            showClickMenu: false,
          },
          {
            id: 3,
            url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            showClickMenu: false,
          },
          {
            id: 4,
            url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            showClickMenu: false,
          },
          {
            id: 5,
            url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            showClickMenu: false,
          },
        ],
        activeIndex: -1,
        contextMenuLeft: 0, // 右键菜单的左边距
        contextMenuTop: 0, // 右键菜单的上边距
      };
    },
    computed: {
      isContextMenuVisible() {
        return this.activeIndex !== -1; // 判断右键菜单是否可见
      },
    },
    mounted() {
      document.addEventListener("click", this.hideContextMenu); // 监听点击事件，用于隐藏右键菜单
    },
  
    methods: {
      showContextMenu(index, event) {
        event.preventDefault(); // 阻止默认的右键菜单弹出
        this.activeIndex = index; // 设置当前激活的索引为点击的索引
        this.contextMenuLeft = event.clientX; // 获取鼠标点击的水平位置
        this.contextMenuTop = event.clientY; // 获取鼠标点击的垂直位置
      },
      hideContextMenu() {
        this.activeIndex = -1; // 重置当前激活的索引
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .all {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 0 40px;
    padding-top: 24px;
    flex-direction: column;
    position: relative;
    .header {
      display: flex;
      margin-bottom: 20px;
      align-items: center;
    }
    .header_left {
      font-size: 18px;
      font-weight: 600;
      color: rgb(37, 38, 43);
    }
    .image_main {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
  
      .demo-image__preview {
        height: 170px;
        width: 170px;
        margin-right: 10px;
        position: relative;
        .context_menu {
          position: fixed;
          z-index: 999;
          width: 150px;
          background-color: #fff;
          box-shadow: 0 2px 4px rgba(0, 13, 0, 0.5);
          border-radius: 5px;
          padding: 4px;
          .context_menu_items {
          list-style: none;
          padding: 0;
          margin: 0;
  
          .context_menu_item {
            height: 36px;
            border-radius: 5px;
            padding: 4px 4px;
            display: flex;
            align-items: center;
  
            .context_menu_item_icon {
              font-size: 16px;
              margin-right: 5px;
            }
  
            .context_menu_item_text {
              font-size: 15px;
              color: #504e4e;
            }
          }
          .context_menu_item.waring{
            color: rgb(255, 111, 102);
          }
          .context_menu_item.waring:hover{
            background-color: rgb(243, 91, 81, 0.12);
          }
          .context_menu_item:hover {
            background-color: rgba(132, 133, 141, 0.08);
          }
        }
        }
      }
    }
  }
  </style>
  